<template>
  <div>
    <v-dialog v-if=" ui === 'dialog' " ref="page" v-model="page" :return-value.sync="vtime" persistent lazy full-width width="296px">
      <v-text-field slot="activator" v-model="vtime" :label="title" prepend-icon="access_time" readonly
        :rules="rules"></v-text-field>
      <v-time-picker v-if="page" format="24hr" v-model="vtime" locale="zh-cn">
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="page = false, clearDate()">清空</v-btn>
        <v-btn flat color="primary" @click="page = false">取消</v-btn>
        <v-btn flat color="primary" @click="saveDate()">确定</v-btn>
      </v-time-picker>
    </v-dialog>
    <v-menu v-if=" ui === 'menu' " ref="page" :close-on-content-click="false" v-model="page"
      :nudge-right="40" :return-value.sync="vtime" lazy transition="scale-transition" offset-y
      full-width max-width="290px" min-width="290px">
      <v-text-field slot="activator" v-model="vtime" :label="title"
        prepend-icon="access_time" :rules="rules" readonly></v-text-field>
      <v-time-picker v-if="page" v-model="vtime" @change="$refs.page.save(vtime)"></v-time-picker>
    </v-menu>
  </div>
</template>

<script>
export default {
  name: 'timePicker',
  data: function () {
    return {
      page: '',
      vtime: ''
    }
  },
  props: ['ui', 'title', 'time', 'rules'],
  methods: {
    saveDate () {
      this.$refs.page.save(this.vtime)
      this.$emit('upDate', this.vtime)
    },
    clearDate () {
      this.$refs.page.save(null)
      this.$emit('upDate', null)
    }
  },
  watch: {
    time () {
      this.vtime = this.time
    }
  }
}
</script>

<style scoped>

</style>
